<template>
  <view class="audit-setting-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="page-title">单据审核设置管理</view>
      <view class="header-actions">
        <button @click="showAddFlowDialog" class="add-btn">+ 新增流程</button>
        <button @click="importFlow" class="import-btn">导入流程</button>
        <button @click="exportFlow" class="export-btn">导出流程</button>
      </view>
    </view>

    <!-- 主内容区：左侧流程列表 + 右侧流程配置 -->
    <view class="main-container">
      <!-- 左侧流程列表 -->
      <view class="flow-list-container">
        <view class="flow-list-header">
          <view class="header-title">审核流程列表</view>
          <view class="header-count">{{ flowList.length }} 个流程</view>
        </view>

        <view class="flow-search">
          <input 
            v-model="searchKey" 
            placeholder="搜索流程名称" 
            @input="searchFlow"
            class="search-input"
          ></input>
          <uni-icons type="search" size="24" class="search-icon"></uni-icons>
        </view>

        <view class="flow-filter">
          <view class="filter-title">流程状态</view>
          <view class="filter-tags">
            <view 
              v-for="(status, index) in flowStatusOptions" 
              :key="index"
              class="filter-tag"
              :class="{ active: currentStatus === status.value }"
              @click="filterFlowByStatus(status.value)"
            >
              {{ status.label }}
            </view>
          </view>
        </view>

        <view class="flow-list">
          <view 
            v-for="(flow, index) in filteredFlowList" 
            :key="flow.id"
            class="flow-item"
            :class="{ active: selectedFlowId === flow.id }"
            @click="selectFlow(flow.id)"
          >
            <view class="flow-name">{{ flow.name }}</view>
            <view class="flow-info">
              <view class="flow-desc">{{ flow.desc || '无描述' }}</view>
              <view class="flow-status" :class="flow.status === 'active' ? 'active-status' : 'inactive-status'">
                {{ flow.status === 'active' ? '启用' : '禁用' }}
              </view>
            </view>
            <view class="flow-meta">
              <view class="flow-nodes">{{ flow.nodes.length }} 个审核节点</view>
              <view class="flow-update-time">{{ formatDate(flow.updateTime || flow.createTime) }}</view>
            </view>
            <view class="flow-actions" >
				<view class="" title="编辑">
					    <uni-icons 
                type="compose" 
                size="20" 
                class="edit-icon"
                @click="showEditFlowDialog(flow)"
              ></uni-icons>
				</view>
          
              <uni-icons title="复制"
               type="folder-add"
                size="20" 
			                class="copy-icon"
                @click="copyFlow(flow)"
              ></uni-icons>
              <uni-icons 
			  title="删除"
                type="trash" 
                size="20" 
                class="delete-icon"
                @click="deleteFlowDialog(flow.id)"
              ></uni-icons>
            </view>
          </view>
        </view>

        <view class="flow-list-footer" v-if="filteredFlowList.length === 0">
          <uni-icons type="info" size="36" color="#ccc"></uni-icons>
          <view class="empty-text">暂无流程数据</view>
          <button @click="showAddFlowDialog" class="empty-add-btn">创建第一个流程</button>
        </view>
      </view>

      <!-- 右侧流程配置 -->
      <view class="flow-config" v-if="selectedFlow">
        <!-- 流程基本信息 -->
        <view class="flow-info-card">
          <view class="card-header">
            <view class="card-title">流程基本信息</view>
            <view class="card-actions">
              <button 
                @click="toggleFlowStatus" 
                class="status-btn"
                :class="selectedFlow.status === 'active' ? 'deactivate-btn' : 'activate-btn'"
              >
                {{ selectedFlow.status === 'active' ? '禁用流程' : '启用流程' }}
              </button>
            </view>
          </view>
          <view class="info-row">
            <view class="info-label">流程名称</view>
            <view class="info-value">{{ selectedFlow.name }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">流程描述</view>
            <view class="info-value">{{ selectedFlow.desc || '无描述' }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">创建时间</view>
            <view class="info-value">{{ formatDate(selectedFlow.createTime) }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">最后修改</view>
            <view class="info-value">{{ formatDate(selectedFlow.updateTime) }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">适用单据类型</view>
            <view class="info-value">{{ selectedFlow.docTypes || '未指定' }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">流程状态</view>
            <view class="info-value">
              <view class="status-tag" :class="selectedFlow.status === 'active' ? 'active-tag' : 'inactive-tag'">
                {{ selectedFlow.status === 'active' ? '启用中' : '已禁用' }}
              </view>
            </view>
          </view>
        </view>

        <!-- 审核节点配置 -->
        <view class="nodes-config">
          <view class="config-header">
            <view class="config-title">审核节点配置</view>
            <view class="config-tips">配置流程的审核节点和顺序</view>
            <button @click="showAddNodeDialog" class="add-node-btn">+ 添加节点</button>
          </view>

          <!-- 节点列表 -->
          <view class="nodes-list">
            <view 
              v-for="(node, index) in selectedFlow.nodes" 
              :key="node.id"
              class="node-item"
              :class="{ 'first-node': index === 0, 'last-node': index === selectedFlow.nodes.length - 1 }"
            >
              <view class="node-header">
                <view class="node-index">{{ index + 1 }}</view>
                <view class="node-name">{{ node.name }}</view>
                <view class="node-type" :class="node.type === 'parallel' ? 'parallel-type' : 'serial-type'">
                  {{ node.type === 'parallel' ? '并行审核' : '串行审核' }}
                </view>
                <view class="node-actions">
                  <uni-icons 
                    type="arrow-up" 
                    size="20" 
                    class="move-icon"
                    @click="moveNodeUp(index)"
                    :disabled="index === 0"
                  ></uni-icons>
                  <uni-icons 
                    type="arrow-down" 
                    size="20" 
                    class="move-icon"
                    @click="moveNodeDown(index)"
                    :disabled="index === selectedFlow.nodes.length - 1"
                  ></uni-icons>
                  <uni-icons 
                    type="compose" 
                    size="20" 
                    class="edit-icon"
                    @click="showEditNodeDialog(node, index)"
                  ></uni-icons>
                  <uni-icons 
                    type="trash" 
                    size="20" 
                    class="delete-icon"
                    @click="DeleteNodeDialog(node.id, index)"
                  ></uni-icons>
                </view>
              </view>
              
              <view class="node-content">
                <view class="node-desc">{{ node.desc || '无描述' }}</view>
                
                <!-- 审核人配置 -->
                <view class="approvers-config">
                  <view class="config-title">审核人员</view>
                  <view class="approvers-list">
                    <view 
                      v-for="(approver, idx) in node.approvers" 
                      :key="idx"
                      class="approver-item"
                    >
                      <view class="approver-avatar">
                        <text>{{ approver.name.charAt(0) }}</text>
                      </view>
                      <view class="approver-info">
                        <view class="approver-name">{{ approver.name }}</view>
                        <view class="approver-role">{{ approver.role }}</view>
                      </view>
                      <uni-icons 
                        type="close" 
                        size="20" 
                        class="remove-icon"
                        @click.stop="removeApprover(node.id, idx)"
                      ></uni-icons>
                    </view>
                  </view>
                  <button @click="showAddApproverDialog(node.id)" class="add-approver-btn">
                    + 添加审核人
                  </button>
                </view>
                
                <!-- 审核规则配置 -->
                <view class="rules-config">
                  <view class="config-title">审核规则</view>
                  <view class="rule-item">
                    <view class="rule-label">通过条件</view>
                    <view class="rule-value">
                      {{ getPassConditionText(node.passCondition) }}
                    </view>
                  </view>
                  <view class="rule-item">
                    <view class="rule-label">超时处理</view>
                    <view class="rule-value">
                      {{ getTimeoutActionText(node.timeoutAction) }}
                      <text v-if="node.timeoutHours > 0">({{ node.timeoutHours }}小时)</text>
                    </view>
                  </view>
                </view>
              </view>
              
              <!-- 连接线 -->
              <view class="node-connector" v-if="index < selectedFlow.nodes.length - 1"></view>
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-btns">
          <button @click="saveFlowConfig" class="save-btn">保存配置</button>
        </view>
      </view>

      <!-- 未选择流程时的提示 -->
      <view class="no-selection" v-if="!selectedFlow && flowList.length > 0">
        <uni-icons type="arrow-left" size="48" color="#ccc"></uni-icons>
        <view class="no-selection-text">请从左侧选择一个审核流程进行配置</view>
      </view>
    </view>

    <!-- 新增/编辑流程弹窗 -->
    <uni-popup 
	ref="flowDialog"
      mode="center"
        :isMaskClick="true"
    >
      <view class="flow-dialog">
        <view class="dialog-title">{{ isEditFlow ? '编辑流程' : '新增流程' }}</view>
        <view class="dialog-form">
          <view class="form-item">
            <view class="form-label required">流程名称</view>
            <input 
              v-model="flowForm.name" 
              placeholder="请输入流程名称" 
              class="form-input"
              maxlength="50"
            ></input>
          </view>
          <view class="form-item">
            <view class="form-label">流程描述</view>
            <textarea 
              v-model="flowForm.desc" 
              placeholder="请输入流程描述（可选）" 
              class="form-textarea"
              maxlength="200"
              rows="3"
            ></textarea>
          </view>
          <view class="form-item">
            <view class="form-label required">适用单据类型</view>
            <view class="doc-type-selector">
              <view 
                v-for="(type, index) in docTypeOptions" 
                :key="index"
                class="type-option"
              :class="{ selected: flowForm && flowForm.docType && Object.values(flowForm.docType).includes(type.value) }"
                @click="toggleDocType(type)"
              >
                {{ type.label }}
              </view>
            </view>
          </view>
          <view class="form-item">
            <view class="form-label">流程状态</view>
            <view class="status-selector">
              <view 
                class="status-option"
                :class="{ selected: flowForm.status === 'active' }"
                @click="flowForm.status = 'active'"
              >
                启用
              </view>
              <view 
                class="status-option"
                :class="{ selected: flowForm.status === 'inactive' }"
                @click="flowForm.status = 'inactive'"
              >
                禁用
              </view>
            </view>
          </view>
        </view>
        <view class="dialog-btns">
          <button @click="cancelDialog('flowDialog')" class="dialog-cancel">取消</button>
          <button 
            @click="confirmFlowForm" 
            class="dialog-confirm"
            :disabled="!flowForm.name.trim()||flowForm.docType&&Object.keys(flowForm.docType).length=== 0"
          >
            {{ isEditFlow ? '更新流程' : '创建流程' }}
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 新增/编辑节点弹窗 -->
    <uni-popup 
	ref="nodeDialog"
      v-model="showNodeDialog" 
      mode="center"
      :isMaskClick="true"
    >
      <view class="node-dialog">
        <view class="dialog-title">{{ isEditNode ? '编辑节点' : '新增节点' }}</view>
        <view class="dialog-form">
          <view class="form-item">
            <view class="form-label required">节点名称</view>
            <input 
              v-model="nodeForm.name" 
              placeholder="请输入节点名称" 
              class="form-input"
              maxlength="50"
            ></input>
          </view>
          <view class="form-item">
            <view class="form-label">节点描述</view>
            <textarea 
              v-model="nodeForm.desc" 
              placeholder="请输入节点描述（可选）" 
              class="form-textarea"
              maxlength="200"
              rows="3"
            ></textarea>
          </view>
          <view class="form-item">
            <view class="form-label required">审核类型</view>
            <view class="node-type-selector">
              <view 
                class="type-option"
                :class="{ selected: nodeForm.type === 'serial' }"
                @click="nodeForm.type = 'serial'"
              >
                串行审核
              </view>
              <view 
                class="type-option"
                :class="{ selected: nodeForm.type === 'parallel' }"
                @click="nodeForm.type = 'parallel'"
              >
                并行审核
              </view>
            </view>
          </view>
          <view class="form-item">
            <view class="form-label required">通过条件</view>
            <picker mode="selector" :range="passConditionOptions" :range-key="'label'" @change="onPassConditionChange">
              <view class="picker">
                {{ passConditionOptions[passConditionIndex].label }}
              </view>
            </picker>
          </view>
          <view class="form-item">
            <view class="form-label required">超时处理</view>
            <picker mode="selector" :range="timeoutActionOptions" :range-key="'label'" @change="onTimeoutActionChange">
              <view class="picker">
                {{ timeoutActionOptions[timeoutActionIndex].label }}
              </view>
            </picker>
          </view>
          <view class="form-item" v-if="nodeForm.timeoutAction !== 'none'">
            <view class="form-label required">超时时间(小时)</view>
            <input 
              v-model.number="nodeForm.timeoutHours" 
              placeholder="请输入超时小时数" 
              class="form-input"
              type="digit"
            ></input>
          </view>
        </view>
        <view class="dialog-btns">
          <button @click="closeNodeDialog " class="dialog-cancel">取消</button>
          <button 
            @click="confirmNodeForm" 
            class="dialog-confirm"
            :disabled="!nodeForm.name.trim() || (nodeForm.timeoutAction !== 'none' && nodeForm.timeoutHours <= 0)"
          >
            {{ isEditNode ? '更新节点' : '添加节点' }}
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 添加审核人弹窗 -->
    <uni-popup 
	ref="approverDialog"
      v-model="showApproverDialog" 
      mode="center"
          :isMaskClick="true"
    >
      <view class="approver-dialog">
        <view class="dialog-title">添加审核人</view>
        <view class="dialog-form">
          <view class="form-item">
            <view class="form-label required">审核人</view>
            <picker mode="multiSelector" :range="multiSelectorData" @change="onApproverChange" @columnchange="selcDept" :value="selectedIndices" :range-key="'name'">
              <view class="picker">
                {{ selectedApprover ? selectedApprover.name : '请选择审核人' }}
              </view>
            </picker>
          </view>
          <view class="form-item">
            <view class="form-label required">角色</view>
            <picker mode="selector" :range="approverRoleOptions" :range-key="'label'" @change="onApproverRoleChange" >
              <view class="picker">
                {{ approverRoleOptions[approverRoleIndex].label }}
              </view>
            </picker>
          </view>
        </view>
        <view class="dialog-btns">
          <button @click="cancelDialog('approverDialog')"  class="dialog-cancel">取消</button>
          <button 
            @click="addApprover('approverDialog')" 
            class="dialog-confirm"
            :disabled="!selectedApprover"
          >
            添加
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 删除流程确认弹窗 -->
    <uni-popup 
	ref="deleteFlowDialog"
      mode="center"
      :isMaskClick="true"
    >
      <view class="confirm-dialog">
        <view class="dialog-title danger">确认删除</view>
        <view class="dialog-content">
          确定要删除该审核流程吗？删除后该流程将不再可用，已关联该流程的单据将失去对应的审核规则。
        </view>
        <view class="dialog-btns">
          <button @click="cancelDialog('deleteFlowDialog')" class="dialog-cancel">取消</button>
          <button @click="confirmDeleteFlow('deleteFlowDialog')" class="dialog-confirm danger">确认删除</button>
        </view>
      </view>
    </uni-popup>

    <!-- 删除节点确认弹窗 -->
    <uni-popup 
	ref="deleteNodeDialog"
       mode="center"
      :mask-click="false"
    >
      <view class="confirm-dialog">
        <view class="dialog-title danger">确认删除</view>
        <view class="dialog-content">
          确定要删除该审核节点吗？删除后该节点将不再参与审核流程，后续节点顺序将自动调整。
        </view>
        <view class="dialog-btns">
          <button @click="cancelDialog('deleteNodeDialog')" class="dialog-cancel">取消</button>
          <button @click="confirmDeleteNode('deleteNodeDialog')" class="dialog-confirm danger">确认删除</button>
        </view>
      </view>
    </uni-popup>

    <!-- 操作结果提示 -->
    <uni-popup
	ref="showToast"
	mode="center" >
	  <view class="confirm-dialog">
	        <view class="dialog-title danger">提醒</view>
	        <view class="dialog-content">
	          {{toastMessage}}
	        </view>
	        <view class="dialog-btns">
	    
	          <button @click="cancelDialog('showToast')" class="dialog-confirm">确认</button>
	        </view>
	      </view>
	  </uni-popup> 
  </view>
</template>

<script>
	const auditSet=uniCloud.importObject('auditSet')
    const getUserList=uniCloud.importObject('employee')
	import {userMainStore} from'@/store/mainStore.js'
	const mainStore=userMainStore()
export default {
   props:{
	ownership:{
			type:Array,
			default:()=>{},
			required:true
		} 
   },
  data() {
    return {
      // 审核流程列表
      flowList: [
   
      ],
      
      // 单据类型选项
      docTypeOptions: [
        { value: 'ApplyForStorage', label: '入库申请' },
		{ value: 'ApplyForOut', label: '出库申请' },
	    { value: 'ApplyForStage', label: '盘点申请' },

      ],
      
      // 流程状态选项
      flowStatusOptions: [
        { value: 'all', label: '全部' },
        { value: 'active', label: '启用' },
        { value: 'inactive', label: '禁用' }
      ],
      
      // 通过条件选项
      passConditionOptions: [
        { value: 'all', label: '全部同意' },
        { value: 'majority', label: '多数同意' },
        { value: 'any', label: '任一同意' }
      ],
      
      // 超时处理选项
      timeoutActionOptions: [
        { value: 'none', label: '不自动处理' },
        { value: 'auto_approve', label: '自动通过' },
        { value: 'auto_reject', label: '自动拒绝' },
        { value: 'forward', label: '转发给上级' }
      ],
      
      // 审核人角色选项
      approverRoleOptions: [
        { value: 'approver', label: '审核人' },
        { value: 'reviewer', label: '复核人' },
        { value: 'final_approver', label: '最终审批人' }
      ],
      
      // 搜索和筛选相关
      searchKey: '',
      currentStatus: 'all',
      
      // 当前选中的流程和节点
      selectedFlowId: '',
      selectedFlow: null,
      selectedNodeId: '',
      selectedNodeIndex: -1,
      
      // 表单数据
      flowForm: {
        id: '',
        name: '',
        desc: '',
        status: 'active',
        docType: {}
      },
      
      nodeForm: {
        id: '',
        name: '',
        desc: '',
        type: 'serial',
        passCondition: 'all',
        timeoutAction: 'none',
        timeoutHours: 24,
        approvers: []
      },
      timeoutActionIndex:0,
	  passConditionIndex:0,
      // 弹窗状态
      showFlowDialog: false,
      isEditFlow: false,
      
      showNodeDialog: false,
      isEditNode: false,
	      multiSelectorData: [[], []],
	    
	        selectedIndices: [0, 0],
	       
	        deptUserMap: {},
	      
	       selectedUser: '',
	       
      showApproverDialog: false,
      selectedApprover: null,
      approverRoleIndex: 0,
	  approverList :[],
   
      showDeleteFlowDialog: false,
      
      showDeleteNodeDialog: false,
       deleteNodeIndex: -1,
      
      // 其他状态
      showToast: false,
      toastMessage: ''
    };
  },
  computed: {
    // 筛选后的流程列表
    filteredFlowList() {
	if(this.flowList.length===0){
		return []
		}
      return this.flowList.filter(flow => {
        const matchesStatus = this.currentStatus === 'all' || flow.status === this.currentStatus;
        const matchesSearch = this.searchKey === '' || flow.name.toLowerCase().includes(this.searchKey.toLowerCase());
        return matchesStatus && matchesSearch;
      });
    }
 	
  },
async  mounted() {
    // 初始化：默认选中第一个流程
    if (this.flowList.length > 0) {
      this.selectFlow(this.flowList[0].id);
    }

await	this.initData()

  },
  methods: {
	 async initData(){
		try{
			const res=await auditSet.getFlow({mainBody:mainStore.mainObject})
			console.log("1111111111",res);
			if(res.code){
			this.flowList=[...res.data]
			console.log('流程数据表',res);		
			}else{
			 this.flowList=[]
			 uni.showToast({
			 	title:`${res.errMsg}`
			 })
			}
		} catch(e){
			this.flowList=[]
			console.log("errr",e);
		} 
	  },
	 async getUserList(){
		 try{
			 const res=await getUserList.getList({mainBody:mainStore.mainObject})
			 if(res.code===200){
			
				 return res.data ||[]
				
			 }
		 }catch(e){
			 return []
			 console.error(e);
		 }
	 } ,
async	initMultiSelectorData (){
    const userList=	await this.getUserList()
	 
	  const groupByDept = userList.reduce((acc, user) => {
	    // 如果当前部门还没有分组，初始化一个空数组
	    if (!acc[user.department]) {
	      acc[user.department] = [];
	    }
	    // 将用户添加到对应部门的数组中
	    acc[user.department].push({
	      id: user.id,
	      name: user.name,
	      position: user.position // 可选：保留职位信息
	    });
	    return acc;
	  }, {});
	    const currentNode = this.selectedFlow.nodes.find(node => node.id === this.selectedNodeId);
	 	 const excludedUserIds = currentNode ? currentNode.approvers.map(a => a.id) : [];
	  // 转换为多列选择器需要的格式：[[部门列表], [默认部门的人员列表]]
	  const departments = Object.keys(groupByDept); // 提取所有部门名称
	  const firstDeptUsers = groupByDept[departments[0]] || []; // 默认显示第一个部门的人员
	  
	  // 最终数据源（适配多列选择器）
	  this.multiSelectorData = [
	    departments, // 第一列：部门列表
	    firstDeptUsers.filter(user=>!excludedUserIds.includes(user._id)) 
	 	 .map(user => `${user.name}（${user.position}）`) // 第二列：人员列表（带职位）
	  ];
             this.deptUserMap = groupByDept;
	  },
	  
    // 选择流程
    selectFlow(flowId) {
      this.selectedFlowId = flowId;
      this.selectedFlow = this.flowList.find(flow => flow.id === flowId) || null;
    },
    cancelDialog(id){
		this.$refs[id].close()
	},
    // 按状态筛选流程
    filterFlowByStatus(status) {
      this.currentStatus = status;
    },
    
    // 切换流程状态
async    toggleFlowStatus() {
      if (!this.selectedFlow) return;
      
      const flowIndex = this.flowList.findIndex(flow => flow.id === this.selectedFlowId);
      if (flowIndex > -1) {
        this.flowList[flowIndex] = {
          ...this.flowList[flowIndex],
          status: this.selectedFlow.status === 'active' ? 'inactive' : 'active',
          updateTime: this.formatDateTime(new Date())
        };
		try{
			const res =await auditSet.flowUpdate(this.flowList[flowIndex])
			if(res.code){
			     
			}
		}catch(e){
			console.log(e);
		}
		 this.showToastMessage(`${this.selectedFlow.name} 已${this.selectedFlow.status === 'active' ? '禁用' :'启用' }`);	
		this.selectedFlow = { ...this.flowList[flowIndex] };
    
  
      }
    },

    // 显示新增流程弹窗
    showAddFlowDialog() {
	  
      this.isEditFlow = false;
      this.flowForm = {
        id: `flow_${Date.now()}`,
        name: '',
        desc: '',
        status: 'active',
        docTypes: []
      };
	  this.$refs.flowDialog.open()

    },
    closeNodeDialog(){
		this.$refs.nodeDialog.close()
	},
    // 显示编辑流程弹窗
    showEditFlowDialog(flow) {
      this.isEditFlow = true;
      this.flowForm = {
        id: flow.id,
        name: flow.name,
        desc: flow.desc,
        status: flow.status,
        docType: flow.docType
      };
  
	  this.$refs.flowDialog.open()
    },
    
    // 切换单据类型选择
    toggleDocType(type) {

        this.flowForm.docType=type
      
    },
    
    // 确认流程表单
 async   confirmFlowForm() {
      const flowName = this.flowForm.name.trim();
      if (!flowName || !this.flowForm.docType||Object.keys(this.flowForm.docType).length === 0) return;
      
      if (this.isEditFlow) {
        // 编辑流程
        const flowIndex = this.flowList.findIndex(flow => flow.id === this.flowForm.id);
        if (flowIndex > -1) {
          this.flowList[flowIndex] = {
            ...this.flowList[flowIndex],
            name: flowName,
            desc: this.flowForm.desc,
            status: this.flowForm.status,
            docType: this.flowForm.docType,
            updateTime: this.formatDateTime(new Date()),
			mainBody:mainStore.mainObject
          };
          
          // 如果编辑的是当前选中的流程，更新选中状态
          if (this.selectedFlowId === this.flowForm.id) {
            this.selectedFlow = { ...this.flowList[flowIndex] };
          }
          
          this.showToastMessage('流程信息更新成功');
        }
      } else {
        // 新增流程
        const newFlow = {
          id: this.flowForm.id,
          name: flowName,
          desc: this.flowForm.desc,
          status: this.flowForm.status,
          docType: this.flowForm.docType,
          updateTime: '',
          nodes: [],
		  mainBody:mainStore.mainObject
        };
	
		try{
			const res=await auditSet.addFlow(newFlow )
			if(res.code){
			      this.showToastMessage('新流程创建成功');
				console.log("存入成功",res);
				
				
			}else{
				console.log(res);
				uni.showToast({
					icon:'fail',
					title:`${res.errMsg}`
				},3000)
			}
			
			
		}catch(e){
			console.error("写入错误",e);
			uni.showToast({
				icon:'fail',
				title:'创建失败'+e
			},3000)
		}finally{
			this.initData()
		}
	      
        this.flowList.push(newFlow);
        this.selectFlow(newFlow.id);
  
      }
      this.$refs.flowDialog.close()
 
    },
    
    // 复制流程
 async   copyFlow(flow) {
	 console.log(JSON.stringify(flow));
      const newFlow = {
        id: `flow_${Date.now()}`,
        name: `复制-${flow.name}`,
        desc: flow.desc,
        status: 'inactive',
        docType: flow.docType,
        createTime: this.formatDateTime(new Date()),
        updateTime: '',
        nodes: JSON.parse(JSON.stringify(flow.nodes))
      };
      
      // 修改节点ID以避免冲突
      newFlow.nodes.forEach(node => {
        node.id = `node_${Date.now()}_${node.id.split('_').pop()}`;
      });
      
      this.flowList.push(newFlow);
      this.selectFlow(newFlow.id);
	  try{
		  const a=await auditSet.addFlow(newFlow)
		  if(a.code){
			    this.showToastMessage('流程复制成功');
		  }
	  }catch(e){
		  console.log(e);
	  }
	  
	  
    
    },
    
    // 显示删除流程弹窗
    deleteFlowDialog(flowId) {
      this.deleteFlowId = flowId;

	  this.$refs.deleteFlowDialog.open()
    },
    
    // 确认删除流程
 async   confirmDeleteFlow() {
      const flowIndex = this.flowList.findIndex(flow => flow.id === this.deleteFlowId);
      if (flowIndex > -1) {
        const flowName = this.flowList[flowIndex].name;
		try{
			const r=await auditSet.removeFlow(this.deleteFlowId)
			if(r.code){
		 this.showToastMessage(`流程 "${flowName}" 已删除`);
		 this.flowList.splice(flowIndex,1)
			}
		}catch(e){
			console.log(e);
		}
		           
        if (this.selectedFlowId === this.deleteFlowId) {
          this.selectedFlowId = '';
          this.selectedFlow = null;
          
          // 如果删除后还有流程，选择第一个
          if (this.flowList.length > 0) {
            this.selectFlow(this.flowList[0].id);
          }
        }
           }
      this.$refs.deleteFlowDialog.close()
  
    },
    
    // 显示新增节点弹窗
    showAddNodeDialog() {
      this.isEditNode = false;
      this.nodeForm = {
        id: `node_${Date.now()}`,
        name: '',
        desc: '',
        type: 'serial',
        passCondition: 'all',
        timeoutAction: 'none',
        timeoutHours: 24,
        approvers: []
      };
	  this.$refs.nodeDialog.open()

    },

    // 显示编辑节点弹窗
    showEditNodeDialog(node, index) {
      this.isEditNode = true;
      this.selectedNodeId = node.id;
      this.selectedNodeIndex = index;
      
      this.nodeForm = {
        id: node.id,
        name: node.name,
        desc: node.desc,
        type: node.type,
        passCondition: node.passCondition,
        timeoutAction: node.timeoutAction,
        timeoutHours: node.timeoutHours,
        approvers: JSON.parse(JSON.stringify(node.approvers))
      };
      
      // 设置选择器索引
      this.passConditionIndex = this.passConditionOptions.findIndex(option => option.value === node.passCondition);
      this.timeoutActionIndex = this.timeoutActionOptions.findIndex(option => option.value === node.timeoutAction);
      this.$refs.nodeDialog.open()
 
    },
    
    // 通过条件变更
    onPassConditionChange(e) {
      this.passConditionIndex = e.detail.value;
      this.nodeForm.passCondition = this.passConditionOptions[this.passConditionIndex].value;
    },
    
    // 超时处理变更
    onTimeoutActionChange(e) {
      this.timeoutActionIndex = e.detail.value;
      this.nodeForm.timeoutAction = this.timeoutActionOptions[this.timeoutActionIndex].value;
    },
    
    // 确认节点表单
async confirmNodeForm() {
  if (!this.nodeForm.name.trim()) return;
  
  try {
    if (this.isEditNode) {
      // 编辑节点
      if (this.selectedFlow && this.selectedNodeIndex >= 0) {
        // 更新本地节点数据
        this.selectedFlow.nodes[this.selectedNodeIndex] = {
          ...this.selectedFlow.nodes[this.selectedNodeIndex],
          name: this.nodeForm.name,
          desc: this.nodeForm.desc,
          type: this.nodeForm.type,
          passCondition: this.nodeForm.passCondition,
          timeoutAction: this.nodeForm.timeoutAction,
          timeoutHours: this.nodeForm.timeoutHours,
          approvers: [...this.nodeForm.approvers]
        };
        this.selectedFlow.updateTime = this.formatDateTime(new Date());
        
        // 保存节点数据到数据库
        const nodeUpdateResult = await auditSet.flowUpdata('flowNode', {
              ...this.selectedFlow.nodes[this.selectedNodeIndex]
        });
         if (!nodeUpdateResult.code) {
          throw new Error(`节点更新失败: ${nodeUpdateResult.errMsg}`);
        }
        
            
        // 更新本地流程列表
        const flowIndex = this.flowList.findIndex(flow => flow.id === this.selectedFlow.id);
        if (flowIndex >= 0) {
          this.flowList[flowIndex] = JSON.parse(JSON.stringify(this.selectedFlow));
        }
        
        this.showToastMessage('节点信息更新成功');
      }
    } else {
      // 新增节点
      if (this.selectedFlow) {
        const newNode = {
          id: `node_${Date.now()}`, // 确保有唯一ID生成方法
          name: this.nodeForm.name,
          desc: this.nodeForm.desc,
          type: this.nodeForm.type,
          passCondition: this.nodeForm.passCondition,
          timeoutAction: this.nodeForm.timeoutAction,
          timeoutHours: this.nodeForm.timeoutHours,
          approvers: [...this.nodeForm.approvers]
        };
        
        // 添加新节点到数据库
        const addResult = await auditSet.flowNodeAdd(this.selectedFlow.id, newNode);
        
        if (!addResult.code) {
          throw new Error(`新增节点失败: ${addResult.errMsg}`);
        }
        
        // 更新本地数据
        this.selectedFlow.nodes.push(newNode);
        this.selectedFlow.updateTime = this.formatDateTime(new Date());
        
        // 更新本地流程列表
        const flowIndex = this.flowList.findIndex(flow => flow.id === this.selectedFlow.id);
        if (flowIndex >= 0) {
          this.flowList[flowIndex] = this.selectedFlow;
        }
        
        this.showToastMessage('节点添加成功');
      }
    }
  } catch (error) {
    console.error('节点操作失败:', error);
    this.showToastMessage(`操作失败: ${error.message || '未知错误'}`);
  } finally {
    this.$refs.nodeDialog.close();
  }
},
    
    // 显示删除节点弹窗
    DeleteNodeDialog(nodeId, index) {
      this.deleteNodeId = nodeId;
      this.deleteNodeIndex = index;
	  this.$refs.deleteNodeDialog.open()
  
    },
    
    // 确认删除节点
 async confirmDeleteNode() {
   console.log('节点id', this.deleteNodeId, "流程ID", this.selectedFlowId);
   
   if (!this.selectedFlow || this.deleteNodeIndex < 0) {
     uni.showToast({
       icon: 'none',
       title: '未选择有效节点'
     });
     return;
   }
 
   const nodeName = this.selectedFlow.nodes[this.deleteNodeIndex].name;
   
   // 删除前增加确认对话框
   const confirmResult = await new Promise(resolve => {
     uni.showModal({
       title: '确认删除',
       content: `确定要删除节点 "${nodeName}" 吗？`,
       confirmText: '确认删除',
       confirmColor: '#FF4500',
       success: res => resolve(res.confirm),
       fail: () => resolve(false)
     });
   });
   
   if (!confirmResult) return;
   
   try {
     this.selectedFlow.updateTime = this.formatDateTime(new Date());
     
     const r = await auditSet.removeNodeFromFlow(this.selectedFlowId, this.deleteNodeId);
     console.log(r);
     
     if (r.code) {
       // 从本地数据中移除节点
       this.selectedFlow.nodes.splice(this.deleteNodeIndex, 1);
       
       // 更新flowList中的数据
       const flowIndex = this.flowList.findIndex(flow => flow.id === this.selectedFlowId);
       if (flowIndex >= 0) {
         this.flowList[flowIndex] = JSON.parse(JSON.stringify(this.selectedFlow));
       }
       
       uni.showToast({
         title: `节点 "${nodeName}" 已删除`,
         icon: 'success'
       });
     } else {
       throw new Error(r.errMsg || '删除失败');
     }
   } catch (e) {
     console.error('删除节点失败:', e);
     uni.showToast({
       icon: 'none',
       title: `删除失败: ${e.message}`
     });
   } finally {
     this.$refs.deleteNodeDialog.close();
     // 只在成功时刷新数据，失败时保留当前数据
     // 如果需要确保数据一致性，可以在catch中添加条件判断是否刷新
   }
 },
    
    // 上移节点
  async moveNodeUp(index) {
    if (index <= 0 || !this.selectedFlow) return;
    
    try {
      const nodes = this.selectedFlow.nodes;
      [nodes[index], nodes[index - 1]] = [nodes[index - 1], nodes[index]];
     const  newnodes=this.selectedFlow.nodes.map(item=>item.id)
     
         this.selectedFlow.updateTime = this.formatDateTime(new Date());
         	const newflow={...this.selectedFlow,nodes:newnodes}
     
      
      // 等待数据库更新完成
   const result = await auditSet.flowUpdata( newflow);
      
      if (result.code) {
        // 更新成功后，同步更新flowList中的数据
        const flowIndex = this.flowList.findIndex(flow => flow.id === this.selectedFlow.id);
        if (flowIndex >= 0) {
          this.flowList[flowIndex] = JSON.parse(JSON.stringify(this.selectedFlow));
        }
        
        this.showToastMessage('节点位置已调整');
      } else {
        // 恢复原顺序
        [nodes[index], nodes[index - 1]] = [nodes[index - 1], nodes[index]];
        throw new Error(result.errMsg || '更新失败');
      }
    } catch (error) {
      console.error('节点上移失败:', error);
      this.showToastMessage('节点位置调整失败: ' + error.message);
    }
  },
    
    // 下移节点
async moveNodeDown(index) {
  if (index >= this.selectedFlow.nodes.length - 1 || !this.selectedFlow) return;
  
  try {
    const nodes = this.selectedFlow.nodes;
    [nodes[index], nodes[index + 1]] = [nodes[index + 1], nodes[index]];
	const  newnodes=this.selectedFlow.nodes.map(item=>item.id)

    this.selectedFlow.updateTime = this.formatDateTime(new Date());
    	const newflow={...this.selectedFlow,nodes:newnodes}
    // 更新数据库
    const result = await auditSet.flowUpdata(newflow);
    
    if (result.code) {
      // 同步更新flowList
      const flowIndex = this.flowList.findIndex(flow => flow.id === this.selectedFlow.id);
      if (flowIndex >= 0) {
        this.flowList[flowIndex] = JSON.parse(JSON.stringify(this.selectedFlow));
      }
      
      this.showToastMessage('节点位置已调整');
    } else {
      // 恢复原顺序
      [nodes[index], nodes[index + 1]] = [nodes[index + 1], nodes[index]];
      throw new Error(result.errMsg || '更新失败');
    }
  } catch (error) {
    console.error('节点下移失败:', error);
    this.showToastMessage('节点位置调整失败: ' + error.message);
  }
},

// 显示添加审核人弹窗
showAddApproverDialog(nodeId) {
	console.log(nodeId);
  // 检查nodeId有效性
  if (!nodeId) {
    this.showToastMessage('无效的节点ID');
    return;
  }
  
  // 查找对应节点
  const node = this.selectedFlow.nodes.find(node => node.id === nodeId);
  if (!node) {
    this.showToastMessage('未找到指定节点');
    return;
  }
  
  // 重置表单数据
  this.selectedNodeId = nodeId;
  this.selectedApprover = null;
  this.approverRoleIndex = 0;
  this.approverList = []; // 重置审批人列表
  
  // 打开弹窗
  this.$refs.approverDialog.open();
  
  // 可以在这里添加加载审批人列表的逻辑
  this.initMultiSelectorData();
},

// 加载可选审批人列表

    
    // 审核人选择变更
    onApproverChange(e) {
        console.log("11111111",e);
      const [deptIndex, userIndex] = e.detail.value;
      const selectedDept = this.multiSelectorData[0][deptIndex]; // 选中的部门
      const selectedUserInfo = this.deptUserMap[selectedDept][userIndex]; // 选中的人员详情
      
      // 保存选中结果（可根据需求存储id、name等）
      this.selectedApprover = selectedUserInfo
      console.log('选中人员ID：', this.selectedApprover); // 后续可用于提交表单等
    
  },
    selcDept(e){
		  const { column, value } = e.detail;
		      // 只有当第一列（部门列）变化时，才更新第二列（人员列）
		      if (column === 0) {
		        const selectedDept = this.multiSelectorData[0][value]; // 当前选中的部门
		        const users = this.deptUserMap[selectedDept] || []; // 获取该部门的人员列表
		        // 更新第二列数据（人员列表）
		        this.multiSelectorData[1] = users.map(user => `${user.name}（${user.position}）`);
		        // 重置第二列的选中索引为0（默认选中第一个人员）
		        this.selectedIndices = [value, 0];
		      }
	},
    // 审核人角色变更
    onApproverRoleChange(e) {
		console.log(e);
      this.approverRoleIndex = e.detail.value;
    },
    
   // 添加审核人
   addApprover(name) {
     if (!this.selectedApprover || !this.selectedFlow) return;
     
     // 找到当前节点
     const nodeIndex = this.selectedFlow.nodes.findIndex(node => node.id === this.selectedNodeId);
     if (nodeIndex === -1) return;
     
     // 获取选中的角色
     const role = this.approverRoleOptions[this.approverRoleIndex].value;
     
     // 添加审核人到节点
     this.selectedFlow.nodes[nodeIndex].approvers.push({
       id: this.selectedApprover.id,
       name: this.selectedApprover.name,
       role: role
     });
     
     // 更新流程修改时间
     this.selectedFlow.updateTime = this.formatDateTime(new Date());
     
     // 关闭弹窗并显示提示
	 this.$refs[name].close()

     this.showToastMessage('审核人添加成功');
   },
   
   // 移除审核人
   removeApprover(nodeId, approverIndex) {
     const node = this.selectedFlow.nodes.find(node => node.id === nodeId);
     if (node && node.approvers.length > approverIndex) {
       node.approvers.splice(approverIndex, 1);
       this.selectedFlow.updateTime = this.formatDateTime(new Date());
       this.showToastMessage('审核人已移除');
     }
   },
   
   // 格式化日期时间
   formatDateTime(date) {
     if (!date) return '';
     if (typeof date === 'string') return date;
     
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
     const day = String(date.getDate()).padStart(2, '0');
     const hours = String(date.getHours()).padStart(2, '0');
     const minutes = String(date.getMinutes()).padStart(2, '0');
     const seconds = String(date.getSeconds()).padStart(2, '0');
     
     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
   },
   
   // 格式化日期（仅显示年月日）
   formatDate(dateStr) {
     if (!dateStr) return '';
     
     // 如果是时间戳，先转换为日期对象
     if (typeof dateStr === 'number') {
       dateStr = new Date(dateStr).toISOString();
     }
     
     // 处理可能的ISO格式日期字符串
     if (dateStr.includes('T')) {
       return dateStr.split('T')[0];
     }
     
     // 处理自定义格式日期字符串
     return dateStr.split(' ')[0];
   },
   
   // 获取通过条件文本
   getPassConditionText(value) {
     const condition = this.passConditionOptions.find(option => option.value === value);
     return condition ? condition.label : value;
   },
   
   // 获取超时处理文本
   getTimeoutActionText(value) {
     const action = this.timeoutActionOptions.find(option => option.value === value);
     return action ? action.label : value;
   },
   
   // 显示提示消息
   showToastMessage(message) {
     this.toastMessage = message;
     this.$refs.showToast.open() ;
   },
   
   // 导入流程
   importFlow() {
     // 实际应用中应该调用文件选择API并处理导入逻辑
     this.showToastMessage('导入功能开发中');
   },
   
   // 导出流程
   exportFlow() { 
     if (!this.selectedFlow) {
       this.showToastMessage('请先选择一个流程');
       return;
     }
     
     // 实际应用中应该将当前流程数据导出为文件
     this.showToastMessage('导出功能开发中');
   },
// 保存流程配置
  saveFlowConfig() {
  if (!this.selectedFlow) {
    this.showToastMessage('请先选择一个流程');
    return;
  }
  
  // 在实际应用中，这里应该是将流程配置保存到服务器
  this.simulateApiCall(this.selectedFlow)
    .then(() => {
      // 更新流程的修改时间
      this.selectedFlow.updateTime = this.formatDateTime(new Date());
      
      // 显示保存成功的提示
      this.showToastMessage('流程配置已成功保存');
    })
    .catch(error=>{
	      console.error('保存流程配置失败:', error);
      this.showToastMessage('保存失败，请稍后重试');	
	})
      // 处理保存失败的情况

    
	
},

// 模拟API调用（实际应用中应替换为真实的API调用）
simulateApiCall(config){
  return new Promise((resolve, reject) => {
    // 模拟网络请求延迟
    setTimeout(() => {
      // 随机成功率，模拟可能的失败情况
      const success = Math.random() > 0.1;
      
      if (success) {
        resolve({
          code: 200,
          message: '保存成功',
          data: config
        });
      } else {
        reject(new Error('服务器错误，请稍后重试'));
      }
    }, 800);
  });
}
}
};
</script>
<style lang="scss" scoped>
	.audit-setting-page {
	  background-color: #f5f5f5;
	  min-height: 100vh;
	  padding: 20rpx;
	  font-size: 28rpx;
	  color: #333;
	  width: 100%;
	}
	
	/* 页面头部样式 */
	.page-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 16rpx 0;
	  margin-bottom: 20rpx;
	}
	
	.page-title {
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #333;
	}
	
	.header-actions {
	  display: flex;
	  gap: 16rpx;
	}
	
	.add-btn {
	  background-color: #007aff;
	  color: #fff;
	  padding: 12rpx 24rpx;
	  border-radius: 8rpx;
	  font-size: 28rpx;
	}
	
	.import-btn, .export-btn {
	  background-color: #fff;
	  color: #666;
	  border: 1px solid #eee;
	  padding: 12rpx 24rpx;
	  border-radius: 8rpx;
	  font-size: 28rpx;
	}
	
	/* 主内容区布局 */
	.main-container {
	  display: flex;
	  gap: 20rpx;
	  height: calc(100vh - 140rpx);
	}
	
	/* 左侧流程列表样式 */
	.flow-list-container {
	  width: 25%;
	  background-color: #fff;
	  border-radius: 12rpx;
	  overflow: hidden;
	  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	  display: flex;
	  flex-direction: column;
	}
	
	.flow-list-header {
	  padding: 20rpx 16rpx;
	  border-bottom: 1px solid #eee;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.header-title {
	  font-size: 28rpx;
	  font-weight: bold;
	  color: #333;
	}
	
	.header-count {
	  font-size: 24rpx;
	  color: #999;
	  background-color: #f5f5f5;
	  padding: 2rpx 12rpx;
	  border-radius: 12rpx;
	}
	
	.flow-search {
	  position: relative;
	  padding: 16rpx;
	  border-bottom: 1px solid #eee;
	}
	
	.search-input {
	  width: 100%;
	  padding: 12rpx 16rpx 12rpx 68rpx;
	  border: 1px solid #eee;
	  border-radius: 8rpx;
	  font-size: 26rpx;
	}
	
	.search-icon {
	  position: absolute;
	  left: 30rpx;
	  top: 26rpx;
	  color: #999;
	}
	
	.flow-filter {
	  padding: 16rpx;
	  border-bottom: 1px solid #eee;
	}
	
	.filter-title {
	  font-size: 26rpx;
	  color: #666;
	  margin-bottom: 12rpx;
	}
	
	.filter-tags {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10rpx;
	}
	
	.filter-tag {
	  padding: 6rpx 16rpx;
	  background-color: #f5f5f5;
	  color: #666;
	  border-radius: 16rpx;
	  font-size: 24rpx;
	}
	
	.filter-tag.active {
	  background-color: #007aff;
	  color: #fff;
	}
	
	.flow-list {
	  flex: 1;
	  overflow-y: auto;
	}
	
	.flow-item {
	  padding: 16rpx;
	  border-bottom: 1px solid #f5f5f5;
	  cursor: pointer;
	  transition: background-color 0.2s;
	}
	
	.flow-item.active {
	  background-color: #f0f7ff;
	  border-left: 4rpx solid #007aff;
	}
	
	.flow-name {
	  font-size: 28rpx;
	  font-weight: 500;
	  color: #333;
	  margin-bottom: 8rpx;
	}
	
	.flow-info {
	  display: flex;
	  justify-content: space-between;
	  align-items: flex-start;
	  margin-bottom: 8rpx;
	}
	
	.flow-desc {
	  flex: 1;
	  font-size: 24rpx;
	  color: #666;
	  display: -webkit-box;
	  -webkit-line-clamp: 1;
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  margin-right: 10rpx;
	}
	
	.flow-status {
	  padding: 2rpx 10rpx;
	  border-radius: 12rpx;
	  font-size: 22rpx;
	  white-space: nowrap;
	}
	
	.active-status {
	  background-color: #e6ffed;
	  color: #52c41a;
	}
	
	.inactive-status {
	  background-color: #fff2e8;
	  color: #fa8c16;
	}
	
	.flow-meta {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  font-size: 22rpx;
	  color: #999;
	  margin-bottom: 8rpx;
	}
	
	.flow-actions {
	  display: flex;
	  justify-content: flex-end;
	  gap: 12rpx;
	  opacity: 0;
	  transition: opacity 0.2s;
	}
	
	.flow-item:hover .flow-actions {
	  opacity: 1;
	}
	
	.edit-icon {
	  color: #007aff;
	}
	
	.copy-icon {
	  color: #fa8c16;
	}
	
	.delete-icon {
	  color: #f56c6c;
	}
	
	.flow-list-footer {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  padding: 40rpx 20rpx;
	  color: #999;
	}
	
	.empty-text {
	  margin: 20rpx 0;
	  font-size: 26rpx;
	}
	
	.empty-add-btn {
	  background-color: #007aff;
	  color: #fff;
	  padding: 10rpx 24rpx;
	  border-radius: 8rpx;
	  font-size: 26rpx;
	}
	
	/* 右侧流程配置样式 */
	.flow-config {
	  flex: 1;
	  background-color: #fff;
	  border-radius: 12rpx;
	  overflow-y: auto;
	  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	  display: flex;
	  flex-direction: column;
	}
	
	/* 流程信息卡片 */
	.flow-info-card {
	  padding: 20rpx;
	  border-bottom: 1px solid #eee;
	  background-color: #f9f9f9;
	}
	
	.card-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 16rpx;
	}
	
	.card-title {
	  font-size: 28rpx;
	  font-weight: bold;
	  color: #333;
	}
	
	.status-btn {
	  padding: 8rpx 20rpx;
	  border-radius: 8rpx;
	  font-size: 26rpx;
	}
	
	.activate-btn {
	  background-color: #52c41a;
	  color: #fff;
	}
	
	.deactivate-btn {
	  background-color: #fa8c16;
	  color: #fff;
	}
	
	.info-row {
	  display: flex;
	  margin-bottom: 16rpx;
	}
	
	.info-label {
	  width: 180rpx;
	  font-size: 26rpx;
	  color: #666;
	  flex-shrink: 0;
	}
	
	.info-value {
	  flex: 1;
	  font-size: 26rpx;
	  color: #333;
	  word-break: break-all;
	}
	
	.status-tag {
	  display: inline-block;
	  padding: 4rpx 16rpx;
	  border-radius: 16rpx;
	  font-size: 24rpx;
	}
	
	.active-tag {
	  background-color: #e6ffed;
	  color: #52c41a;
	}
	
	.inactive-tag {
	  background-color: #fff2e8;
	  color: #fa8c16;
	}
	
	/* 节点配置区域 */
	.nodes-config {
	  flex: 1;
	  padding: 20rpx;
	  overflow-y: auto;
	}
	
	.config-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20rpx;
	  flex-wrap: wrap;
	  gap: 16rpx;
	}
	
	.config-title {
	  font-size: 28rpx;
	  font-weight: bold;
	  color: #333;
	}
	
	.config-tips {
	  font-size: 24rpx;
	  color: #999;
	}
	
	.add-node-btn {
	  background-color: #007aff;
	  color: #fff;
	  padding: 8rpx 20rpx;
	  border-radius: 8rpx;
	  font-size: 26rpx;
	  white-space: nowrap;
	}
	
	.nodes-list {
	  position: relative;
	  padding-left: 40rpx;
	}
	
	.node-item {
	  position: relative;
	  padding: 20rpx;
	  background-color: #f9f9f9;
	  border-radius: 8rpx;
	  margin-bottom: 20rpx;
	}
	
	.node-item::before {
	  content: '';
	  position: absolute;
	  left: -30rpx;
	  top: 28rpx;
	  width: 20rpx;
	  height: 20rpx;
	  border-radius: 50%;
	  background-color: #007aff;
	  z-index: 1;
	}
	
	.node-connector {
	  position: absolute;
	  left: -20rpx;
	  top: 48rpx;
	  width: 2rpx;
	  height: calc(100% + 20rpx);
	  background-color: #ddd;
	}
	
	.node-header {
	  display: flex;
	  align-items: center;
	  margin-bottom: 16rpx;
	  gap: 16rpx;
	  flex-wrap: wrap;
	}
	
	.node-index {
	  width: 36rpx;
	  height: 36rpx;
	  background-color: #007aff;
	  color: #fff;
	  border-radius: 50%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 22rpx;
	  flex-shrink: 0;
	}
	
	.node-name {
	  font-size: 26rpx;
	  font-weight: 500;
	  color: #333;
	  flex: 1;
	}
	
	.node-type {
	  padding: 4rpx 12rpx;
	  border-radius: 12rpx;
	  font-size: 22rpx;
	  white-space: nowrap;
	}
	
	.serial-type {
	  background-color: #e6f7ff;
	  color: #1890ff;
	}
	
	.parallel-type {
	  background-color: #fff0f0;
	  color: #f5222d;
	}
	
	.node-actions {
	  display: flex;
	  gap: 10rpx;
	}
	
	.move-icon {
	  color: #999;
	}
	
	.move-icon[disabled] {
	  opacity: 0.3;
	}
	
	.node-content {
	  padding-top: 16rpx;
	  border-top: 1px dashed #e0e0e0;
	}
	
	.node-desc {
	  font-size: 24rpx;
	  color: #666;
	  margin-bottom: 20rpx;
	  padding-bottom: 16rpx;
	  border-bottom: 1px dashed #e0e0e0;
	}
	
	/* 审核人配置 */
	.approvers-config {
	  margin-bottom: 20rpx;
	}
	
	.approvers-list {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 16rpx;
	  margin: 12rpx 0;
	}
	
	.approver-item {
	  display: flex;
	  align-items: center;
	  padding: 8rpx 12rpx;
	  background-color: #fff;
	  border: 1px solid #eee;
	  border-radius: 8rpx;
	  gap: 10rpx;
	}
	
	.approver-avatar {
	  width: 40rpx;
	  height: 40rpx;
	  border-radius: 50%;
	  background-color: #007aff;
	  color: #fff;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 22rpx;
	}
	
	.approver-info {
	  font-size: 24rpx;
	}
	
	.approver-name {
	  color: #333;
	}
	
	.approver-role {
	  font-size: 22rpx;
	  color: #999;
	}
	
	.remove-icon {
	  color: #f56c6c;
	}
	
	.add-approver-btn {
	  background-color: #f0f7ff;
	  color: #007aff;
	  border: 1px dashed #007aff;
	  padding: 8rpx 16rpx;
	  border-radius: 8rpx;
	  font-size: 24rpx;
	}
	
	/* 审核规则配置 */
	.rules-config {
	  margin-top: 16rpx;
	}
	
	.rule-item {
	  display: flex;
	  margin-bottom: 12rpx;
	}
	
	.rule-label {
	  width: 120rpx;
	  font-size: 24rpx;
	  color: #666;
	  flex-shrink: 0;
	}
	
	.rule-value {
	  flex: 1;
	  font-size: 24rpx;
	  color: #333;
	}
	
	/* 操作按钮 */
	.action-btns {
	  padding: 20rpx;
	  border-top: 1px solid #eee;
	  display: flex;
	  justify-content: flex-end;
	}
	
	.save-btn {
	  background-color: #007aff;
	  color: #fff;
	  padding: 12rpx 32rpx;
	  border-radius: 8rpx;
	  font-size: 28rpx;
	}
	
	/* 未选择流程提示 */
	.no-selection {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  color: #ccc;
	  padding: 40rpx;
	}
	
	.no-selection-text {
	  margin-top: 24rpx;
	  font-size: 28rpx;
	  text-align: center;
	}
	
	/* 弹窗样式 */
	.flow-dialog, .node-dialog, .approver-dialog, .confirm-dialog {
	  width: 600rpx;
	  background-color: #fff;
	  border-radius: 16rpx;
	  padding: 32rpx;
	}
	
	.dialog-title {
	  font-size: 32rpx;
	  font-weight: bold;
	  color: #333;
	  margin-bottom: 24rpx;
	  text-align: center;
	}
	
	.dialog-title.danger {
	  color: #f56c6c;
	}
	
	.dialog-content {
	  font-size: 26rpx;
	  color: #666;
	  margin-bottom: 32rpx;
	  line-height: 1.6;
	  text-align: center;
	}
	
	.dialog-form {
	  margin-bottom: 32rpx;
	}
	
	.form-item {
	  margin-bottom: 24rpx;
	}
	
	.form-label {
	  display: block;
	  font-size: 26rpx;
	  color: #333;
	  margin-bottom: 8rpx;
	}
	
	.form-label.required::after {
	  content: '*';
	  color: #f56c6c;
	  margin-left: 4rpx;
	}
	
	.form-input {
	  width: 100%;
	  padding: 14rpx 16rpx;
	  border: 1px solid #eee;
	  border-radius: 8rpx;
	  font-size: 26rpx;
	}
	
	.form-textarea {
	  width: 100%;
	  padding: 14rpx 16rpx;
	  border: 1px solid #eee;
	  border-radius: 8rpx;
	  font-size: 26rpx;
	  min-height: 120rpx;
	}
	
	.doc-type-selector, .status-selector, .node-type-selector {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 12rpx;
	}
	
	.type-option, .status-option {
	  padding: 12rpx 20rpx;
	  background-color: #f5f5f5;
	  color: #666;
	  border-radius: 8rpx;
	  font-size: 26rpx;
	  cursor: pointer;
	}
	
	.type-option.selected, .status-option.selected {
	  background-color: #007aff;
	  color: #fff;
	}
	
	.picker {
	  width: 100%;
	  padding: 14rpx 16rpx;
	  border: 1px solid #eee;
	  border-radius: 8rpx;
	  font-size: 26rpx;
	  color: #333;
	}
	
	.dialog-btns {
	  display: flex;
	  gap: 20rpx;
	}
	
	.dialog-cancel {
	  flex: 1;
	  background-color: #f5f5f5;
	  color: #666;
	  border-radius: 8rpx;
	  font-size: 28rpx;
	  padding: 16rpx 0;
	}
	
	.dialog-confirm {
	  flex: 1;
	  background-color: #007aff;
	  color: #fff;
	  border-radius: 8rpx;
	  font-size: 28rpx;
	  padding: 16rpx 0;
	}
	
	.dialog-confirm.danger {
	  background-color: #f56c6c;
	}
	
</style>